<template>
	<view class="page1">
		<image src="./static/timerbg01.png" class="img_bg" />
		<image src="./static/timerbg.png" class="img_logo" />
		<view class="pd_lf--40">
			<view class="page_title">{{close_type == 0 ? "准备开始断食" : "您正在断食"}}</view>
			<image src="./static/calendar.png" class="icon_calendar" @click="goCalendar" />
			<view class="status_wrap" v-if="currentStatus && close_type == 1" @click="goStatus">
				<view class="status_left">
					<image :src="currentStatus.icon" class="status_icon" />
					<view class="status_level">Lv.{{currentStatus.level}}</view>
					<view class="status_title">{{currentStatus.title}}</view>
				</view>
				<image class="status_right" src="./static/timer_icon_01.png" />
			</view>
			<view class="progress_wrap">
				<canvas class="progress_bg" canvas-id="canvasProgressbg"></canvas>
				<canvas class="progress_canvas" canvas-id="canvasProgress"></canvas>
				<template v-if="isStart">
					<view class="progress_text">
						<view class="progress_title">经过的时间</view>
						<view class="progress_time">{{qgdjs_jo.hour}}:{{qgdjs_jo.min}}:{{qgdjs_jo.sec}}</view>
						<view class="progress_title">结束时间</view>
						<view class="progress_end">{{end_time}}</view>
						<view class="progress_rate">{{qgdjs_jo.rate || 0}}%</view>
					</view>
				</template>
				<template v-else>
					<view class="progress_text">
						<view class="progress_title">据断食开始还有</view>
						<view class="progress_time">{{qgdjs_jo.hour}}:{{qgdjs_jo.min}}:{{qgdjs_jo.sec}}</view>
					</view>
				</template>

			</view>
			<view class="page_sel_wrap">
				<picker class="eject" @change="typePickerChange" :value="wtoolsHour" mode="selector"
					:range="wtoolsHourArr" range-key="name">
					<view class="uni-input"> {{wtoolsHourArr[wtoolsHour].name}}</view>
				</picker>
			</view>
			<view class="pd_lf_72">
				<view class="time_wrap">
					<view class="time_left">
						<view class="time_label"></view>
						<view class="time_text">开始</view>
					</view>
					<view class="time_right">
						<view class="time_right_text">{{start_time}}</view>
						<image src="./static/timer_icon_06.png" class="time_edit" />

					</view>
				</view>
				<view class="time_line"></view>
				<view class="time_wrap">
					<view class="time_left">
						<view class="time_label end"></view>
						<view class="time_text">结束(预计)</view>
					</view>
					<view class="time_right">
						<view class="time_right_text end">{{end_time}}</view>
						<!-- <picker class="page_time--item__picker" mode="time" value="thistimeend" end="{{thistimeend}}" bindchange="bindTimeChange2" wx:if="{{userset.yc_endtime == 0}}">
                <view></view>
            </picker> -->
					</view>
				</view>

			</view>
			<view class="page_btn" v-if="close_type === 0" @click="beforeSubmit">
				<view class="page_btn--title">开始断食</view>
			</view>
			<view class="page_btn red" v-else @click="beforeClose">
				<view class="page_btn--title">结束断食</view>
			</view>
			<view class="ready_wrap">
				<view class="ready_head">
					<image src="./static/timer_icon_07.png" class="ready_icon" />
					<view class="ready_title">断食准备</view>
				</view>
				<view class="ready_list">
					<view class="ready_item" v-for="item in introfo2">
						<view class="ready_dot"></view>
						<view class="ready_text">{{ item }}</view>
					</view>
				</view>
			</view>

			<comment-list></comment-list>
			<view class="page_empty"></view>
		</view>
	</view>
</template>

<script>
	let windowWidth = uni.getSystemInfoSync().windowWidth;
	const app = getApp();
	import CommentList from "./components/comment_list";
	import mock from "./data.json"
	export default {
		name: "home",
		components: {
			CommentList
		},
		data() {
			return {
				array: [6, 12, 24, 36],
				top_text: 6,
				eject_index2: [0],
				jssj: "",
				jssj2: '',
				end_time: '',
				end_time2: '',
				timer: "",
				qgdjs_jo: {
					day: "00",
					hour: "00",
					min: "00",
					sec: "00"
				},
				bgurl: "",
				thistimestat: "",
				thistimeend: "",
				now: "",
				introfo: "1.设置结束时间，方便养成习惯。",
				showendtimeedit: false,
				userset: {},
				start_time: "06月27日 10:55",
				close_type: 0,
				is_eject: false,
				value: ["中国"],
				multiArray: [
					["今天", "明天", "3-2", "3-3", "3-4", "3-5"],
					[0, 1, 2, 3, 4, 5, 6],
					[0, 10, 20],
				],
				isVip: false,
				progress_txt: '正在匹配中...',
				count: 0, // 设置 计数器 初始为0
				countTimer: null, // 设置 定时器 初始为null
				page: 1,
				total: 0,
				isSubmit: false,
				isSetStart: false,
				isStart: true,
				disabled: false,
				introfo2: [],
				currentStatus: {},
				windowWidth: windowWidth,
				wtoolsHourArr: [{
					name: '断食16个小时',
					value: 16
				}, {
					name: '断食18个小时',
					value: 18
				}, {
					name: '断食23个小时',
					value: 23
				}],
				wtoolsHour: 0,
			}
		},
		mounted() {
			this.getData()
			this.drawProgressbg()
		},
		onLoad(opts) {
			console.log('opts', opts)
			uni.$on('refresh', () => {
				this.qgdjs_jo = {
					day: "00",
					hour: "00",
					min: "00",
					sec: "00"
				}
				console.log('close',this.jssj2)
				this.close_type = 0
				this.getData()
				this.drawProgressbg()
			})
		},
		onUnload() {
			uni.$off('refresh')
		},
		methods: {
			goStatus() {
				uni.navigateTo({
					url: `/pages/time_meter/status?level=${this.currentStatus.level}`
				})
			},
			goCalendar() {
				uni.navigateTo({
					url: `/pages/time_meter/calendar`
				})
			},
			beforeClose() {
				clearInterval(this.timer);
				uni.navigateTo({
					url: `/pages/time_meter/comment?hour=${this.qgdjs_jo.hour}&min=${this.qgdjs_jo.min}`
				})

			},
			beforeSubmit() {
				const level = Number(this.userset.level)
				if (!level) {
					this.isVip = true
					return
				}
				if (this.disabled) return
				this.disabled = true
				this.close_yc();
			},

			close_yc() {
				// var that = this;
				//const { userset, eject_hour, isSetStart, jssj2 } = this.data
				this.qgdjs_jo = {
					day: "00",
					hour: "00",
					min: "00",
					sec: "00"
				}
				// this.jssj2 = ''
				console.log('close',this.jssj2)
				this.close_type = 1
				this.disabled = false
				this.countdown()
				
			},

			countdown() {
				let that = this

				let kssj_format = parseInt(that.jssj2 * 1000);
				let start = parseInt(now - kssj_format);
				let now = new Date().getTime();
				let lefttime = parseInt(now - kssj_format);
				if (lefttime < 0) return

				that.timer = setInterval(function() {
					let jssj_format = parseInt(that.jssj * 1000);
					let kssj_format = parseInt(that.jssj2 * 1000);
					now = new Date().getTime()
					let lefttime = parseInt(now - kssj_format);
					console.log('countdown', that.eject_hour)
					let eject_hour = that.eject_hour * 60 * 60 * 1000;
					let d = parseInt(lefttime / 1000 / 3600 / 24);
					let h = parseInt(lefttime / 1000 / 3600);
					let m = parseInt((lefttime / 1000 / 60) % 60);
					let s = parseInt((lefttime / 1000) % 60);
					that.qgdjs_jo = {
						day: that.padNumber(d, 2),
						hour: that.padNumber(h, 2),
						min: that.padNumber(m, 2),
						sec: that.padNumber(s, 2),
						rate: parseInt((lefttime) / eject_hour * 100),
					}

					that.formatStatus(parseInt((lefttime) / 1000 / 60 / 60))

					that.drawCircle((lefttime) / (eject_hour / 2));
				}, 1000)

			},
			padNumber(num, fill) {
				let len = ("" + num).length;
				if (fill > len) {
					// 新建一个空数组，长度为所缺位数+1，利用join(0)，得到一个000...的字符串
					num = Array(fill - len + 1 || 0).join(0) + num;
				}
				return num;
			},
			formatStatus(hour) {
				let currentStatus = '';
				if (hour < 2) {
					currentStatus = {
						icon: './static/wtools/Lv.1.png',
						title: '血糖升高',
						level: 1,
					}
				} else if (hour < 5) {
					currentStatus = {
						icon: './static/wtools/Lv.2.png',
						title: '血糖下降',
						level: 2,
					}
				} else if (hour < 8) {
					currentStatus = {
						icon: './static/wtools/Lv.3.png',
						title: '肝醣储存量下降',
						level: 3,
					}
				} else if (hour < 10) {
					currentStatus = {
						icon: './static/wtools/Lv.4.png',
						title: '糖质新生',
						level: 4,
					}
				} else if (hour < 12) {
					currentStatus = {
						icon: './static/wtools/Lv.5.png',
						title: '剩下少量肝醣',
						level: 5,
					}
				} else if (hour < 18) {
					currentStatus = {
						icon: './static/wtools/Lv.6.png',
						title: '酮症状态',
						level: 6,
					}
				} else if (hour < 24) {
					currentStatus = {
						icon: './static/wtools/Lv.7.png',
						title: '燃烧脂肪',
						level: 7,
					}
				} else if (hour < 48) {
					currentStatus = {
						icon: './static/wtools/Lv.8.png',
						title: '自噬',
						level: 8,
					}
				} else if (hour < 56) {
					currentStatus = {
						icon: './static/wtools/Lv.9.png',
						title: '生长激素上升',
						level: 9,
					}
				} else if (hour < 72) {
					currentStatus = {
						icon: './static/wtools/Lv.10.png',
						title: '胰岛素敏感',
						level: 10,
					}
				} else {
					currentStatus = {
						icon: './static/wtools/images/Lv.11.png',
						title: '免疫細胞再生',
						level: 11,
					}
				}
				this.currentStatus = currentStatus
			},

			getData() {
				let data = mock
				if (data.error == "0") {
					if (data.userset && data.userset.js_status == 1) {
						let start = data.userset.yc_starttime;
						let start_time = start;
						let start_time2 = this.formatTimeTwo(start_time, "M月D日 h:m");

						let end_time = (end = data.userset.yc_endtime);
						let end_time2 = this.formatTimeTwo(end_time, "M月D日 h:m");
						let this_times = new Date() / 1000;
						let array = data.wtools_hour;
						console.log('--start-', start)
						console.log('end', end)
						if (start > 0 && end > 0) {
							let sum_time = (end - start) / 3600;
							array.filter((item, i) => {

							})
							for (let i in array) {
								if (array[i] === sum_time) {
									let eject_index2 = [];
									eject_index2[0] = i;
									this.eject_index2[0] = eject_index2
								}
							}
							this.top_text = "断食" + sum_time + "个小时";
							this.eject_hour = sum_time;
						} else {
							this.top_text = "断食" + array[0] + "个小时";
							this.eject_hour = array[0];
						}
						let arr = [];
						data.wtools_hour.map(item=>{
							arr.push({
								name:`断食${item}个小时`,
								value:item
							})
						})
						this.wtoolsHourArr = arr
						this.userset = data.userset
						this.bgurl = data.sysset.bgurl
						this.introfo = data.introfo
						this.introfo2 = data.introfo2
						this.comment_all = data.comment_all
						this.total = data.total
						this.jssj = end_time
						this.jssj2 = start_time
						this.start_time = start_time2
						this.end_time = end_time2
						this.top_text = top_text,
							this.close_type = data.userset.js_status,
							this.isSetStart = true
						this.countdown();

					} else {
						let now = new Date().getTime()
						let start = new Date() / 1000;
						let this_time = this.formatTimeTwo(new Date() / 1000, "Y/M/D");
						let start2 = this.formatTimeTwo(start, "h:m");
						this_time += " " + start2;
						let start_time = Date.parse(this_time) / 1000;
						let start_time2 = this.formatTimeTwo(start_time, "M月D日 h:m");
						let end = start + 16 * 3600;
						let this_time2 = this.formatTimeTwo(end, "Y/M/D");
						let end2 = this.formatTimeTwo(end, "h:m");
						this_time2 += " " + end2;
						let end_time = Date.parse(this_time2) / 1000;
						let end_time2 = this.formatTimeTwo(end_time, "M月D日 h:m");
						let this_times = new Date() / 1000;
						let array = data.wtools_hour;
						this.top_text = "断食" + array[0] + "个小时";
						this.eject_hour = array[0];
						this.userset = data.userset
						this.bgurl = data.sysset.bgurl
						this.introfo = data.introfo
						this.introfo2 = data.introfo2
						this.comment_all = data.comment_all
						this.total = data.total
						let arr = [];
						data.wtools_hour.map(item=>{
							arr.push({
								name:`断食${item}个小时`,
								value:item
							})
						})
						this.wtoolsHourArr = arr
						this.jssj = end_time
						this.jssj2 = start_time
						this.start_time = start_time2
						this.end_time = end_time2
					}
				}
			},
			typePickerChange(e) {
				this.wtoolsHour = e.detail.value
				this.eject_hour = this.wtoolsHourArr[e.detail.value].value
				
				this.resetEndTime()
			},
			drawProgressbg() {
				const ctx = uni.createCanvasContext('canvasProgressbg', this);
				const rpx2pxRatio = this.windowWidth / 375;
				ctx.setLineWidth(20 * rpx2pxRatio); // 设置圆环的宽度
				ctx.setStrokeStyle('#EFF3FD'); // 设置圆环的颜色
				ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.beginPath(); // 开始一个新的路径
				ctx.arc(117 * rpx2pxRatio, 117 * rpx2pxRatio, 105 * rpx2pxRatio, 0, 2 * Math.PI, false);
				// 设置一个原点(100,100)，半径为90的圆的路径到当前路径
				ctx.stroke(); // 对当前路径进行描边
				ctx.draw();
			},
			drawCircle(step) {
				const context = uni.createCanvasContext('canvasProgress', this);
				const rpx2pxRatio = this.windowWidth / 375;
				// 设置渐变
				const gradient = context.createLinearGradient(200, 100, 100, 200);
				gradient.addColorStop("0", "#6FA2FE");
				// gradient.addColorStop("0.5", "#40ED94");
				gradient.addColorStop("1.0", "#6FFEE8");
				context.setLineWidth(20 * rpx2pxRatio);
				context.setStrokeStyle(gradient);
				context.setLineCap('round')
				context.beginPath();
				// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
				context.arc(117 * rpx2pxRatio, 117 * rpx2pxRatio, 105 * rpx2pxRatio, -Math.PI / 2, step * Math.PI - Math
					.PI / 2, false);
				context.stroke();
				context.draw();
			},
			countInterval() {
				// 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
				this.countTimer = setInterval(() => {
					if (this.data.count <= 60) {
						/* 绘制彩色圆环进度条
						注意此处 传参 step 取值范围是0到2，
						所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2 */
						this.drawCircle(this.data.count / (60 / 2));
						this.data.count++;
					} else {
						this.progress_txt = '匹配成功'
						clearInterval(this.countTimer);
					}
				}, 100);
			},
			// 重置结束时间
			resetEndTime() {
				let start = new Date() / 1000;
				let this_time = this.formatTimeTwo(new Date() / 1000, "Y/M/D");
				let start2 = this.formatTimeTwo(start, "h:m");
				this_time += " " + start2;
				let start_time = Date.parse(this_time) / 1000;
				let start_time2 = this.formatTimeTwo(start_time, "M月D日 h:m");
				let end = start + this.eject_hour * 3600;
				let this_time2 = this.formatTimeTwo(end, "Y/M/D");
				let end2 = this.formatTimeTwo(end, "h:m");
				this_time2 += " " + end2;
				let end_time = Date.parse(this_time2) / 1000;
				let end_time2 = this.formatTimeTwo(end_time, "M月D日 h:m");
				this.jssj = end_time
				this.jssj2 = start_time
				this.start_time = start_time2
				this.end_time = end_time2
			},
			// 转换是几个事
			formatTimeTwo(number, format) {
				var formateArr = ["Y", "M", "D", "h", "m", "s"];
				var returnArr = [];
				var date = new Date(number * 1000);
				returnArr.push(date.getFullYear());
				returnArr.push(this.formatNumber(date.getMonth() + 1));
				returnArr.push(this.formatNumber(date.getDate()));

				returnArr.push(this.formatNumber(date.getHours()));
				returnArr.push(this.formatNumber(date.getMinutes()));
				returnArr.push(this.formatNumber(date.getSeconds()));

				for (var i in returnArr) {
					format = format.replace(formateArr[i], returnArr[i]);
				}
				return format;
			},
			// 时间加0
			formatNumber(n) {
				n = n.toString();
				return n[1] ? n : "0" + n;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: transparent;
		/* height:100%; */
		vertical-align: middle;
		line-height: 1.45;
	}

	.pd_lf--40 {
		padding: 0 40rpx;
		box-sizing: border-box;
		position: relative;
	}

	.pd_lf_72 {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.img_bg {
		position: fixed;
		left: 0;
		top: 0;
		height: 617rpx;
		width: 100vw;
		z-index: -1;
	}

	.img_logo {
		position: fixed;
		left: -115rpx;
		bottom: -107rpx;
		height: 458rpx;
		width: 569rpx;
		z-index: -1;
	}

	.img_min_logo {
		position: fixed;
		right: 40rpx;
		top: 60rpx;
		height: 104rpx;
		width: 118rpx;
		z-index: 1;
	}

	.tips_wrap {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
	}

	.img_tips {
		width: 28rpx;
		height: 28rpx;
		display: block;
		margin-right: 12rpx;
	}

	.tips_text {
		font-size: 24rpx;
		color: #fff;
	}

	.page_title {
		margin-top: 20rpx;
		font-size: 52rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
	}

	.icon_calendar {
		position: absolute;
		right: 40rpx;
		top: 10rpx;
		width: 50rpx;
		height: 50rpx;
		display: block;
	}

	.page_sel_wrap {
		margin: 70rpx auto;
		display: flex;
		justify-content: center;

		.eject {
			height: 54rpx;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			background: #EFF3FD url("./static/timer_icon_02.png") no-repeat 216rpx center;
			border-radius: 27rpx;
			padding-left: 34rpx;
			padding-right: 60rpx;
			box-sizing: border-box;
			color: #3A296D;
			background-size: 25rpx auto
		}
	}

	.time_wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.time_line {
		height: 48rpx;
		width: 100%;
		border-left: 2rpx dashed #E0E4EE;
		margin-left: 4rpx;
		box-sizing: border-box;
	}

	.time_left {
		display: flex;
		align-items: center;
	}

	.time_label {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		border: 4rpx solid #6FA2FE;
		box-sizing: border-box;
		margin-right: 14rpx;
	}

	.time_label.end {
		border-color: #FF5790;
	}

	.time_text {
		color: #5B637C;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 1;
	}

	.time_right {
		position: relative;
		display: flex;
		align-items: center;
	}

	.time_right_text {
		color: #6FA2FE;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.time_right_text.end {
		color: #444444;
	}

	.time_edit {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin-left: 20rpx;
	}

	.page_btn {
		width: 530rpx;
		height: 98rpx;
		border-radius: 50rpx;
		color: #fff;
		background: #FF5790;
		box-shadow: 0px 14px 34px 0px rgba(255, 87, 144, 0.4);
		margin: 52rpx auto 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.page_btn.red {
		/* color: #FF5790; */
	}

	.page_btn--title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.page_btn--subtitle {
		font-size: 24rpx;
	}

	.page_card {
		margin-top: 30rpx;
		height: 402rpx;
		width: 100%;
		background: #fff;
		border-radius: 30rpx;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.33);
		padding: 54rpx 28rpx 30rpx;
		box-sizing: border-box;
	}

	.page_countdown {
		display: flex;
		height: 64rpx;
		align-items: center;
		justify-content: center;
	}

	.page_countdown--item {
		width: 80rpx;
		height: 64rpx;
		border-radius: 20rpx;
		color: #fff;
		background: #6586F9;
		font-weight: bold;
		line-height: 64rpx;
		text-align: center;
	}

	.page_countdown--single {
		color: #6586F9;
		font-weight: bold;
		font-size: 50rpx;
		line-height: 1;
		margin: 0 8rpx;
	}

	.page_time {
		margin-top: 50rpx;
		width: 100%;
		height: 206rpx;
		border-radius: 20rpx;
		background-color: #F4F7FF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page_time--item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.page_time--line {
		width: 2rpx;
		height: 96rpx;
		background-color: #6586F9;
		opacity: .2;
	}

	.page_time--item__head {
		display: flex;
		align-items: center;
	}

	.page_time--item__head-icon {
		width: 35rpx;
		height: 35rpx;
		display: block;
	}

	.page_time--item__head-text {
		font-size: 24rpx;
		color: #3A296D;
		font-weight: bold;
		margin-left: 12rpx;
	}

	.page_time--title {
		font-size: 26rpx;
		color: #444444;
		font-weight: bold;
		margin-top: 28rpx;
	}

	.page_time--item__picker {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.page_time--item__picker view {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	.content-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #b2b2b2;
	}

	.marginleft20 {
		display: block;
		margin-left: 40rpx;
	}

	.placeholder2 {
		display: block;
		width: 600rpx;
		height: 600rpx;
		line-height: 600rpx;
		border-radius: 50%;
		line-height: 600rpx;
		text-align: center;
		margin: 0 75rpx;
		font-size: 48rpx;
	}

	.placeholder {
		font-weight: 700;
	}

	.weui-article__h1 {
		margin-bottom: 0;
	}

	.page_header {
		border-bottom: 1px solid #ccc;
	}

	.placeholder image {
		padding-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.placeholder picker {
		display: inline-block;
	}

	.time {
		color: #353535;
	}

	.okstyle {
		color: #66d2b4;
		border: 4rpx solid #66d2b4;
	}

	.bottom_button {
		width: 80%;
		margin: 40rpx auto;
		height: 120rpx;
		border-radius: 75rpx;
		text-align: center;
	}

	.bottom_button .h1 {
		font-size: 38rpx;
		font-weight: 700;
	}

	.bottom_button .h2 {
		font-size: 32rpx;
	}

	.sel_hour {
		position: absolute;
		top: 100rpx;
		text-align: center;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
	}

	.sel_hour .sel_hour_text {
		border: 1px solid #aaa;
		border-radius: 10px;
		padding: 5px 5px 5px 15px;
		display: inline-block;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	view.eject_open_icon {
		display: flex;
		flex-direction: column;
		border: none;
		padding: 0;
		margin-left: 10px;
	}

	.eject_open_icon image {
		width: 15px;
		height: 15px;
		border: none;
		padding: 0;
		line-height: 15px;
	}

	.eoi_up {
		transform: rotate(180deg);
	}

	.eject_hour {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.7);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.eject_hour picker-view {
		margin-top: 250rpx;
		background-color: #fff;
	}

	.eject_hour_button {
		display: flex;
		justify-content: space-around;
		margin-top: 30px;
	}

	.eject_hour_button button {
		width: 150px;
	}


	.ready_wrap {
		margin-top: 48rpx;
		border-radius: 24rpx;
		background: #EFF3FD;
		padding: 50rpx 70rpx 46rpx;
		box-sizing: border-box;
	}

	.ready_icon {
		width: 26rpx;
		height: 32rpx;
		display: block;
	}

	.ready_title {
		color: #374BA2;
		font-size: 30rpx;
		font-weight: 600;
		margin-left: 12rpx;
	}

	.ready_list {
		margin-top: 54rpx;
	}

	.ready_item {
		display: flex;
	}

	.ready_item+.ready_item {
		margin-top: 30rpx;
	}

	.ready_dot {
		margin-top: 10rpx;
		margin-right: 20rpx;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #374BA2;
	}

	.ready_text {
		flex: 1;
		font-size: 30rpx;
		color: #374BA2;
		line-height: 1;
	}

	.ready_head {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page_empty {
		height: 70rpx;
		width: 100%;
	}

	.canvas {
		margin: 30rpx auto 0;
		width: 508rpx;
		height: 508rpx;
		border: 20rpx solid #ffffff;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.15);
		box-sizing: border-box;
		border-radius: 50%;
		background: #fff;
		overflow: hidden;
	}

	.circle_wrap {
		margin: 30rpx auto 0;
		position: relative;
		background-color: #FFFFFF;
		width: 528rpx;
		height: 528rpx;
		border-radius: 50%;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.15);
	}

	.circle_content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 468rpx;
		height: 468rpx;
	}

	.circle_second {
		background-color: #afa;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		clip-path: circle(50%);
		position: absolute;
		transform: rotate(30deg);
	}

	.circle_first {
		/* background-color: #6FA2FE; */
		width: 100%;
		height: 100%;
		border-radius: 50%;
		clip-path: circle(50%);
		position: absolute;
	}

	.content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 396rpx;
		height: 396rpx;
		border-radius: 50%;
		background: #fff;
	}

	.status_wrap {
		margin: 40rpx auto 0;
		width: 642rpx;
		height: 150rpx;
		background: #ffffff;
		border-radius: 44rpx;
		box-shadow: 1px 1px 46px 0px rgba(137, 143, 163, 0.33);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
	}

	.status_wrap::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		top: -30rpx;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border: 20rpx solid transparent;
		border-bottom-color: #fff;
	}

	.status_left {
		display: flex;
		align-items: center;
	}

	.status_icon {
		width: 110rpx;
		height: 110rpx;
		display: block;
		border: 2rpx solid #F1DBE6;
		box-sizing: border-box;
		border-radius: 50%;
	}

	.status_level {
		margin-left: 16rpx;
		height: 36rpx;
		padding: 0 12rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 36rpx;
		color: #ffffff;
		background: #C5CFEF;
	}

	.status_title {
		font-size: 30rpx;
		color: #5C647C;
		font-weight: 600;
		line-height: 1;
		margin-left: 12rpx;
	}

	.status_right {
		width: 28rpx;
		height: 28rpx;
	}


	.progress_wrap {
		margin: 30rpx auto 0;
		position: relative;
		background-color: #FFFFFF;
		width: 528rpx;
		height: 528rpx;
		border-radius: 50%;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.progress_bg {
		position: absolute;
		/* left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); */
		width: 468rpx;
		height: 468rpx;
	}

	.progress_canvas {
		width: 468rpx;
		height: 468rpx;
	}

	.progress_text {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.progress_title {
		font-size: 32rpx;
		color: #5B637C;
		line-height: 1;
	}

	.progress_time {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: #374BA2;
		font-size: 70rpx;
		font-weight: 600;
		line-height: 1;
	}

	.progress_end {
		margin-top: 20rpx;
		color: #374BA2;
		font-weight: 600;
		font-size: 32rpx;
		line-height: 1;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #E0E4EE;
	}

	.progress_rate {
		margin-top: 20rpx;
		color: #5B637C;
		font-size: 28rpx;
		line-height: 1;
		font-weight: 600;
	}
</style>